import { computed, ref } from 'vue';
import {
  ConfigType
} from '../../../data/type';

export default function({ attrs }) {
  const before = ref<string>('');
  const after = ref<string>('');
  const compareDiff = ref<string | string[]>('');
  const pageRoute = ref<string>('edit');
  const showConfig = ref<boolean>(false); // 是否展示配置栏
  const config = ref<ConfigType>({
    mode: attrs.mode,
    language: attrs.language,
    outputFormat: attrs.outputFormat,
    trim: attrs.trim,
    maxHeight: attrs.maxHeight,
    filename: attrs.filename,
    context: attrs.context
  })
  const showResult = computed(() => {
    if (attrs.value) {
      before.value = attrs.value.before;
      after.value = attrs.value.after;
      compareDiff.value = Array.from({ length: 2 }).map(_item => '');
      compareDiff.value[0] = attrs.value.before;
      compareDiff.value[1] = attrs.value.after;
    }
    const result = attrs.value || (pageRoute.value === 'result');
    return result;
  })
  const canEdit = computed(() => {
    return !attrs.value && pageRoute.value === 'edit';
  })
  const methods = {
    /**
     * 校验差异
     */
    checkDiff() {
      pageRoute.value = 'result';
      compareDiff.value = Array.from({ length: 2 }).map(_item => '');
      compareDiff.value[0] = before.value;
      compareDiff.value[1] = after.value;
    },
    /**
     * 将html字符串转换成文本字符串
     * @param html html字符串
     * @returns text 文本字符串
     */
    htmlToText(html: string) {
      const matchDiv = /<div.*?>(.*?)<\/div>/gms;
      const matchArr = html.match(matchDiv);
      if (matchArr) {
        const result = matchArr.map(item => {
          return item.replace(/<\/?div.*?>/gm, '')
        }).join('\n');
        return result;
      }
      return '';
    },
    /**
     * 输出差异比对结果(纯文本比较 text)
     * @param diffResult
     */
    decorateDiffElement(diffResult: {
      count: number;
      value: string;
      added?: boolean;
      removed?: boolean;
    }[]) {
      const resultList = [];
      for (let i = 0, len = diffResult.length; i < len; i++) {
        const {
          value,
          added,
          removed
        } = diffResult[i];
        if (!added && !removed) {
          const normalSpan = `<span>${value}</span>`;
          resultList.push(normalSpan);
        } else if (added) {
          const addSpan = `<span class='addChar'>${value}</span>`;
          resultList.push(addSpan);
        } else {
          const removeSpan = `<span class='removeChar'>${value}</span>`;
          resultList.push(removeSpan);
        }
      }
      compareDiff.value = resultList.join('');
    },
    /**
     * 输出差异比对结果(多行内容比较 multiLine)
     * @param diffResult
     */
    decorateDiffLines(diffResult: {
      count: number;
      value: string;
      added?: boolean;
      removed?: boolean;
    }[]) {
      compareDiff.value = Array.from({ length: 2 }).map(_item => '');
      const before = [];
      const after = [];
      for (let i = 0, len = diffResult.length; i < len; i++) {
        const {
          value,
          added,
          removed
        } = diffResult[i];
        if (!added && !removed) {
          const normalLine = `<div class='editLine'>${value.replace(/\n/, '')}</div>`;
          before.push(normalLine);
          after.push(normalLine);
        } else if (added) {
          const addLine = `<div class='editLine addLine'>${value}</div>`;
          after.push(addLine);
        } else {
          const removeLine = `<div class='editLine removeLine'>${value}</div>`;
          before.push(removeLine);
        }
      }
      compareDiff.value[0] = before.join('');
      compareDiff.value[1] = after.join('');
    },
    /**
     * 返回上个页面
     */
    returnBack() {
      pageRoute.value = 'edit';
    }
  }
  return {
    methods,
    before,
    after,
    compareDiff,
    showResult,
    canEdit,
    pageRoute,
    showConfig,
    config
  }
}
